# Input

<Subtitle>
  A native input element that automatically works with [Field](/react/components/field).
</Subtitle>

<Meta name="description" content="A high-quality, unstyled React input component." />

import { DemoInputHero } from './demos/hero';

<DemoInputHero />

## Usage guidelines

- **Form controls must have an accessible name**: The input must have a meaningful label. Prefer using [`<Field>`](/react/components/field) to provide a visible text label and description, or use the `aria-label` attribute as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Import the component and use it as a single part:

```jsx title="Anatomy"
import { Input } from '@base-ui-components/react/input';

<Input />;
```

## API reference

<Reference component="Input" />
